<template>
  <div class="close">
    <!-- 插槽 -->
    <h4><slot></slot></h4>
    <!--  -->
    <p :class="{off:!value}" @click="$emit('change')">
      <span></span>
    </p>
  </div>
</template>

<script> 
export default {
  props:['value']
}
</script>

<style lang="scss" scoped>
.close{
  width: 60px;
  text-align: center;
  p{
    height: 30px;
    background: #000;
    padding: 5px;
    span{
      background: blue;
      display: block;
      height: 20px;
      width: 25px;
      transform: translateX(100%); 
      transition: transform .3s linear;   
    }
    &.off span{
      transform: translateX(0);
    }
  }
}
</style>